<template>
    <div class="container">
        <!-- 顶部 -->
        <van-nav-bar
            title="提现"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <!-- 表单区域 -->
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
            <!-- 通过 pattern 进行正则校验 -->
            <!-- 提现金额 -->
            <van-field
                v-model="moneyForm.number"
                name="number"
                placeholder="请输入提现金额"
                :rules="[
                    { required: true,message: '请输入金额'},
                    {  pattern: /^[0-9]+$/, message: '请输入正确数额' },
                ]"
            >
                <template #button>
                    <img src="../assets/withdrawmoney.png" alt="">
                </template>
            </van-field>
            <!-- 电话号码 -->
            <van-field
                v-model="moneyForm.userTelephone"
                name="userTelephone"
                placeholder="请输入电话号码"
                :rules="[
                    { required: true,message: '请输入电话号码'},
                    {  pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确号码' },
                ]"
            >
                <template #button>
                    <img src="../assets/withdrawphone.png" alt="">
                </template>
            </van-field>
            <!-- 验证码 -->
                <van-field
                    v-model="moneyForm.authCode"
                    name="authCode"
                    placeholder="请输入验证码"
                    :rules="[
                        { required: true,message: '请输入验证码'},
                        { pattern: /^[0-9]+$/, message: '请校验验证码' },
                    ]"
                >
                    <template #button>
                        <div class="code-btn" v-if="codeOpen" @click="getcodebyClick">点击获取</div>
                        <div class="code-btn on clearfix" v-else>
                            <span>重新获取</span>
                            <CountDown ref="countdown" :time="60" @onFinish="countDownFinished"></CountDown>
                        </div>
                        <img src="../assets/withdrawcode.png" alt="">
                    </template>
                </van-field>
            <!-- 提现 -->
            <div class="login-btn">
                <van-button class="btn" round block type="info" native-type="submit">提现</van-button>
                <div class="notice">
                    <div class="telephone">
                        客服热线：0731-89671685
                        <a v-bind:href="'tel:'+(phone)"></a>
                    </div>
                    <div class="telephone">
                        提示：提现最小金额为1100元
                    </div>
                    <div class="telephone">
                        每次提现会代扣8%的个税
                    </div>
                    <div class="telephone">
                        提现金额会在一个工作日后到账
                    </div>
                </div>
            </div>

        </van-form>
        <!-- 对话框 -->
        <van-dialog width="350px" v-model="showNotice" @confirm="handleConfirm" title="提示">
            提现最小金额为1100元，如提现金额为1100元以下，请拨打客服热线：0731-89671685
        </van-dialog>
    </div>
</template>
<script>
import{getuserInfo} from "@/api/login"
import CountDown from 'vuejs-count-down'
import{getMoneyCode,getMoney} from "@/api/user"
import {mapActions,mapState} from "vuex"
export default {
    components: {
        CountDown,
    },
    data(){
        return{
            moneyForm:{
                number:"",
                authCode:null,
                userTelephone:null
            },
            // 验证码开关
            codeOpen:true,
            // 客服电话
            phone:'0731-89678615',
            // 对话框开关
            showNotice:false
        }
    },
    computed:{
        ...mapState(["userInfo"])
    },
    methods:{
        ...mapActions(["SaveUserInfo"]),
        // 获取验证码
        getcodebyClick(){
            if(!this.moneyForm.userTelephone){
                this.$toast("请输入手机号");
                return
            }
            else if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.moneyForm.userTelephone))){
                this.$toast("请输入正确的手机号");
                return
            }
            else{
                getMoneyCode({userTelephone:Number(this.moneyForm.userTelephone)}).then(res=>{
                    console.log(res)
                })
            }
            this.codeOpen=false
        },
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1);
        },
        // 倒计时结束事件
        countDownFinished() {
            this.codeOpen=true       
        },
        onFailed(errorInfo,values) {
            console.log(values)
            console.log('failed', errorInfo);
        },
        // 
        handleConfirm(){
            this.showNotice=false
        },
        onSubmit(values) {
            const{moneyForm,userInfo}=this
            console.log('submit', values);
            if(values){
                 // 判断是否实名认证
                if(userInfo.salesManNickName){
                    if(moneyForm.number<1100){
                        this.showNotice=true
                    }else{
                        // 提现
                        getMoney({
                            withdrawMoney:moneyForm.number,
                            withdrawContent:"",
                            authCode:moneyForm.authCode
                        }).then(res=>{
                            if(res==1){
                                this.$toast.success("提现成功")
                                //  将提现后的金猪币存入Vuex
                                getuserInfo().then(res=>{
                                    console.log(res)
                                    this.SaveUserInfo(res)
                                })
                                this.$router.go(-1);  // 页面刷新
                            }
                        })
                    }
                }
            }
        },
    }
}
</script>
<style lang="less" scoped>
// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
// 输入框样式
.van-form{
    margin-top: 0.1rem;
}
/deep/.van-field__body{
    position: relative;
    .van-field__button{
        img{
            position: absolute;
            left: 0.15rem;
            top: 50%;
            transform: translate(0,-50%);
            width: 0.34rem;
            height: 0.34rem;
            vertical-align:sub;
        }
    }
}
.van-cell::after{
    display: none;
}
/deep/.van-field__control{
    height: 0.66rem;
    background-color: #fff;
    border-radius: 0.25rem;
    border: 1px solid #ddd;
    // 输入框光标颜色
    caret-color: black;
    padding-left: 0.77rem;
}
/deep/ .van-field__control::placeholder{
    color: #ddd;
}
// 验证码按钮
.code-btn{
    position: absolute;
    right:15px;
    top: 50%;
    transform: translate(0,-50%);
    width: 1.25rem;
    height: 0.41rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.2rem;
    color: #fff;
    background-color: #FF7500;
    text-align: center;
    line-height: 0.23rem;
}
.code-btn.on{
    span{
        float: left;
        padding-left: 0.1rem;
    }
}
// 登录
.login-btn{
    padding: 0 0.9rem;
    margin-top: 0.75rem;
    .btn{
        font-size: 0.3rem;
        background-color: #FF5A00;
        height: 0.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.2rem;
        color: #fff;
    }
    .telephone{
        font-size: 0.24rem;
        text-align: center;
        margin-top: 0.15rem;
        position: relative;
        color: red;
        font-weight: 600;
        a{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 50;
            top: 0;
            transform: translate(-50%,0);
        }
    }
}
.van-button--info{
    border: 1px solid #fff;
}
/deep/.van-dialog__content{
    padding: 0.25rem;
}
</style>